<template>
	<view>
		<view class="fixed-top" :style='{"padding-top": statusBarHeight+"px"}'>
			<view class="header-top">
				<image src="../static/images/backLast.png" class="back" @click="goback"></image>
				<view class="header-top-tittle">我的发布-品牌</view>
				<image class="right-tip" src="../static/images/add.png"
					style='width: 40rpx; height: 40rpx;margin-top: 15rpx;' @click="toPage('/pages/releases/brandCorrelation/brandCorrelation')"></image>
			</view>
			<view class="acea-row row-middle row-between nav-bg">
				<view class="item" :class="index===categoryOn?'item-on':''" v-for="(item,index) in categoryList"
					:key="index" @click="categoryNavClick(item,index)">
					<view class="acea-row row-middle row-center img">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="name">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="content" :style='{"padding-top": (statusBarHeight+130)+"px"}'>
			<view class='line'>
				<brandItem :item="item" v-for="(item,index) in list"></brandItem>
			</view>
			<view class='loadingicon acea-row row-center row-middle'>
				<text class='loading iconfont icon-jiazai' :hidden='loading==true'></text>{{loadTitle}}
			</view>
		</view>
		<emptyPage v-if="list.length == 0 && !loading">
		</emptyPage>
	</view>
</template>

<script>
	var app = getApp();
	import brandItem from "../components/brandItem";
	import emptyPage from '@/components/emptyPage.vue';
	import {
		toPage
	} from '@/filters/commFilter.js'
	import {
		getBrandListApi,
		getApplyAddApi,
		getclassificationListApi,
		getBrandOnListApi
	} from '@/api/brand/index.js';
	export default {
		components: {
			brandItem,
			emptyPage
		},
		data() {
			return {
				isWidth: 40,
				isLeft: 0,
				tabLeft: 0,
				typeOn: 1,
				list: [],
				statusBarHeight: 0,
				categoryList: [],
				categoryOn: 0,
				page: 1,
				loading: true,
				loadend: false,
				loadTitle: '加载更多',
				totalPage: 1

			}
		},
		onLoad() {
			// #ifdef MP || APP-PLUS
			let height = app.globalData.navHeight;
			this.statusBarHeight = height - 155;
			// #endif
			// #ifdef H5
			this.statusBarHeight = 20;
			// #endif
		},

		onReachBottom() {
			if(this.page >= this.totalPage) return
			this.page += 1;
			this.getBrandList()
		},

		mounted() {
			// this.getTypeList()
			this.getBrandList()
		},
		methods: {
			toPage,
			//获取类别列表
			async getTypeList() {
				try {
					let {
						data
					} = await getclassificationListApi();
					data.forEach( item => {
						console.log(item)
						item.children = item.children || []
						item.children.forEach( children => {
							this.categoryList.push(children)
						})
					})
					this.getBrandList();
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			//获取品牌列表
			async getBrandList() {
				uni.showLoading()
				try {
					let {
						data
					} = await getBrandOnListApi({
						page: this.page,
						limit: 10
					});
					console.log("data",data)
					let list = data.list.map(item => {
						let typeName = {
							'0':'国际知名品牌',
							'1':'国内知名品牌',
							'2':'本工知名品牌',
							'3':'成长性国内品牌'
						}
						item.type = typeName[item.type];
						return item
					})
					this.list = [...this.list,...data.list];
					this.totalPage = data.totalPage;
					if (this.page == data.totalPage && this.list.length > 0) this.loadTitle = '已全部加载'
					else if(this.page < data.totalPage && this.list.length > 0) this.loadTitle = '加载更多'
					else this.loadTitle = '暂无数据'
					
				} catch (e) {
					//TODO handle the exception
					console.log("error",e)
				}
				uni.hideLoading()
			},
			goback() {
				// #ifdef H5
				return history.back();
				// #endif
				// #ifndef H5
				return uni.navigateBack({
					delta: 1,
				})
				// #endif
			},
			typeNavClick(item, index) {
				let title = '发布-' + item.name
				uni.setNavigationBarTitle({
					title: title
				})
				this.typeOn = index
			},
			// 导航栏点击
			categoryNavClick(item, index) {
				// let title = '发布-'+item.name+this.types[this.typeOn].name
				// uni.setNavigationBarTitle({
				// 	title:title
				// })
				if (this.categoryList.length > 6) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				}
				this.categoryOn = index //设置导航点击了哪一个
				this.isLeft = index * this.isWidth //设置下划线位置
				this.list = []
				this.getBrandList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header-top {
		position: relative;
		height: 88rpx;
		line-height: 88rpx;
		background: rgba(238, 33, 45, 1);
		padding: 0rpx 30rpx;
		text-align: center;

		.header-top-tittle {
			font-size: 36rpx;
			color: rgba(255, 255, 255, 1);
		}

		.right-tip {
			position: absolute;
			right: 26rpx;
			top: 50%;
			transform: translateY(-20rpx);
			height: 40rpx !important;
			width: 40rpx !important;
			margin: unset !important;
		}
	}

	.nav-bg {
		background: #ffffff;



		.item {
			display: inline-block;
			white-space: nowrap;

			.img {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				background: #ffffff;
				margin: 0 auto;

				image {
					width: 42rpx;
					height: 44rpx;
				}
			}

			.name {
				// width: 70rpx;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: rgba(0, 0, 0, 1);
				text-align: center;
			}
		}

		.item-on {
			.img {
				background: rgba(247, 247, 247, 1);
			}

			.name {
				color: rgba(239, 39, 50, 1);
			}
		}
	}

	.type-bg {
		padding: 24rpx 30rpx;
		background: rgba(247, 248, 250, 1);

		.type~.type {
			margin-left: 18rpx;
		}

		.type {
			padding: 6rpx 24rpx;
			border-radius: 10rpx;
			border: 1px solid rgba(229, 229, 229, 1);
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
		}

		.type-on {
			border: 1px solid rgba(238, 33, 45, 1);
			background: rgba(238, 33, 45, 1);
			color: #ffffff;

		}
	}

	.fixed-top {
		width: 100%;
		background: #EE212D;
		position: fixed;
		top: 0;
		left: 0;
		height: 240rpx;
		z-index: 999;
	}

	.back {
		position: absolute;
		left: 26rpx;
		top: 50%;
		transform: translateY(-11rpx);
		height: 30rpx !important;
		width: 22rpx !important;
		margin: unset !important;
	}
</style>